<template>
  <div id="app">
    TODOList
    <msg @add="add" />
    <listitem
      v-for="(item,index) in list"
      :key="index"
      :item="item.name"
      :index="index"
      :isFinished="item.done"
      @done="handleDone"
    />
  </div>
</template>

<script>
import listitem from './components/listitem.vue';
import msg from './components/InputAndButton.vue';
export default {
  name: 'App',
  components: {
    listitem,
    msg
  },
  data() {
    return {
      list: [{ name: '吃饭' }, { name: '喝水' }, { name: '运动' }]
    };
  },

  methods: {
    handleDone(index) {
      const currentItem = this.list[index];
      this.list.splice(index, 1);
      currentItem.done = true;
      this.list.push(currentItem);
    },
    add(currentTodo) {
      this.list.unshift(currentTodo);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
